<template>
  <div>
    <div v-show="descriptions">
      <!-- 基本信息 -->
      <!-- <div class="box"></div> -->
      <div style="margin: 20px 0"></div>

      <div>
        <el-descriptions
          class="margin-top SourcIormation"
          :column="4"
          size="medium"
          border
        >
          <template slot="extra">
            <Row class="operation"> </Row>
          </template>
          <!-- 地址 -->
          <el-descriptions-item>
            <template slot="label"> 装货地址： </template>
            {{ orderInfo.beginProvinceName }}
            {{ orderInfo.beginCityName }} {{ orderInfo.beginAreaName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 详细地址 ： </template>

            {{ orderInfo.beginAddress }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template
              slot="label"
              label-class-name="my-label"
              content-class-name="my-content"
            >
              装运范围：
            </template>
            {{ this.orderInfo.pretendEnclosure }} km
          </el-descriptions-item>
          <!-- 公司名称、联系人、联系电话 -->
          <el-descriptions-item>
            <template slot="label"> 发货单位： </template>
            <span
              class="NotFilled"
              v-if="
                this.orderInfo.extractName == '' ||
                this.orderInfo.extractName == null
              "
            >
              未填写
            </span>
            <span v-else>
              {{ this.orderInfo.extractName }}/{{
                this.orderInfo.extracContactName
              }}/ {{ this.orderInfo.extractPhone }}</span
            >
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label"> 卸货地址： </template>
            {{ orderInfo.endProvinceName }}
            {{ orderInfo.endCityName }} {{ orderInfo.endAreaName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 详细地址： </template>
            {{ orderInfo.endAddress }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
          >
            <template slot="label"> 签收范围： </template>
            {{ this.orderInfo.dischargeEnclosure }} km
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">收货单位： </template>
            <span
              class="NotFilled"
              v-if="
                this.orderInfo.takeName == '' || this.orderInfo.takeName == null
              "
            >
              未填写
            </span>
            <span v-else>
              {{ this.orderInfo.takeName }}/{{
                this.orderInfo.takeContactName
              }}/{{ this.orderInfo.takePhone }}</span
            >
          </el-descriptions-item>
        </el-descriptions>
        <div style="margin: 10px 0"></div>
        <div>
          <el-descriptions
            class="margin-top SourcIormation"
            :column="4"
            size="medium"
            border
          >
          </el-descriptions>
        </div>
      </div>

      <div style="margin: 10px 0"></div>
      <el-descriptions
        class="margin-top"
        title="基本信息"
        :column="5"
        size="medium"
        border
      >
        <template slot="extra"> </template>
        <el-descriptions-item>
          <template slot="label"> 货源编号： </template>
          {{ orderInfo.goodNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 货品名称： </template>
          {{ orderInfo.goodSubType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 货物类型： </template>
          {{ orderInfo.goodType | TypeGoods }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 运费单价：</template>
          <span
            class="NotFilled"
            v-if="
              this.orderInfo.driverUnitPrice == null ||
              this.orderInfo.driverUnitPrice == ''
            "
          >
            未填写
          </span>
          <span v-else> {{ this.orderInfo.driverUnitPrice }} 元/吨</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 计价方式：</template>
          <span class="NotFilled" v-if="this.orderInfo.valuationUnit == null">
            未填写
          </span>
          <span v-else>
            {{
              this.orderInfo.valuationUnit == "1"
                ? "按重量"
                : this.orderInfo.valuationUnit == "2"
                ? "按体积"
                : "按件数"
            }}</span
          >
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 发布重量： </template>
          {{
            orderInfo.totalGoodWeight == null ? "0" : orderInfo.totalGoodWeight
          }}
          吨
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 剩余重量： </template>
          {{ orderInfo.surplusWeight == null ? "0" : orderInfo.surplusWeight }}
          吨
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 体积： </template>
          {{ orderInfo.volume == null ? "0" : orderInfo.volume }}
          m³
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 件数： </template>
          {{ orderInfo.piece == null ? "0" : orderInfo.piece }}
          件
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 运输要求 ： </template>
          <span class="NotFilled" v-if="subRemarks == '' || subRemarks == null">
            未填写
          </span>
          <span v-else>
            <Tooltip max-width="200" :content="orderInfo.content">
              {{ subRemarks }}
            </Tooltip>
          </span>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 基本信息 -->
      <div class="box"></div>
      <!-- 订单信息 -->
      <el-descriptions
        class="margin-top"
        title="运单信息"
        :column="4"
        size="medium"
        border
      >
        <el-descriptions-item>
          <template slot="label"> 托运单号： </template>
          {{ orderInfo.orderNo }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 运单来源： </template>
          {{
         orderInfo.orderSource == "1"
              ? "自主抢单"
              : orderInfo.orderSource == "2"
              ? "平台派单"
              : "----"
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 驾驶员： </template>
          <span v-if="orderInfo.driverInfoVo">
            {{ orderInfo.driverInfoVo.nickName }}
          </span>
          <span style="color: #a9a9a9" v-else> 未选择 </span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 车辆： </template>
          <span v-if="orderInfo.vehicleInfoVo.vehicleNum">
            {{ orderInfo.vehicleInfoVo.vehicleNum }}
          </span>
          <span style="color: #a9a9a9" v-else> 未选择 </span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 预计装车： </template>
          <span
            v-if="
              orderInfo.estimateLoadingTime != '' &&
              orderInfo.estimateLoadingTime != null
            "
            >{{ orderInfo.estimateLoadingTime }}
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 实际装车： </template>
          <span
            v-if="orderInfo.loadingTime != '' && orderInfo.loadingTime != null"
          >
            <span> {{ orderInfo.loadingTime }}</span>
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label"> 预计卸车： </template>
          <span
            v-if="
              orderInfo.estimateDischargeTime != '' &&
              orderInfo.estimateDischargeTime != null
            "
            >{{ orderInfo.estimateDischargeTime }}
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">实际卸车： </template>
          <span
            v-if="
              orderInfo.dischargeTime != '' && orderInfo.dischargeTime != null
            "
          >
            <span> {{ orderInfo.dischargeTime }}</span>
          </span>
          <span v-else>**-**-** **:**:**</span>
        </el-descriptions-item>
      </el-descriptions>
      <!-- 订单信息 -->
    </div>
    <!-- 车主 -->
    <NewOwnerDetails
      @newOwnerDetailsEnd="newOwnerDetailsEnd"
      :newOwnerDetailsId="newOwnerDetailsId"
      :newOwnerDetails="this.newOwnerDetails"
    >
    </NewOwnerDetails>
    <!-- 驾驶员详情   -->
    <DriverDetails
      @DriverDetaEnd="DriverDetaEnd"
      :BidderdUserId="BidderdUserId"
      :driverModalue="this.driverModalue"
    >
    </DriverDetails>
    <!-- 车辆详情 -->
    <VehicleDetails
      @VehicleDetailsEnd="VehicleDetailsEnd"
      :VehicleDetailsId="VehicleDetailsId"
      :VehicleDetailsModalue="this.VehicleDetailsModalue"
    >
    </VehicleDetails>
  </div>
</template>

<script>
import { getStore, setStore } from "@/libs/storage";
import VehicleDetails from "@/views/componentsonn_source_goods/VehicleDetails";
import DriverDetails from "@/views/componentsonn_source_goods/DriverDetails";
import NewOwnerDetails from "@/views/componentsonn_source_goods/newOwnerDetails";
export default {
  data() {
    return {
      descriptions: true,

      newOwnerDetails: false, //车主弹框
      newOwnerDetailsId: "", //车主Id
      BidderdUserId: "", //报价人Id
      driverModalue: false, //驾驶员详情弹框
      VehicleDetailsId: "", //车辆id
      VehicleDetailsModalue: false, //车辆详情弹框
      header: {
        accessToken: getStore("accessToken"),
      },
      accessToken: getStore("accessToken"),
      subRemarks: "",
    };
  },
  props: {
    orderInfo: {
      type: Object,
      default: "",
    },
  },
  watch: {
    orderInfo(val) {
      if (val) {
        if (this.orderInfo.vehicleInfoVo) {
          this.carryGoodWeight = this.orderInfo.vehicleInfoVo.approvedLoad; // / 1000
        }
        this.currentTime = this.getAge(new Date());
        this.Time1 = this.getAge(this.orderInfo.estimateLoadingTime);
        this.Time2 = this.getAge(this.orderInfo.startDate);
        this.Time3 = this.getAge(this.orderInfo.estimateDischargeTime);
        this.Time4 = this.getAge(this.orderInfo.endDate);
        this.descriptions = true;
        if (this.orderInfo.content != null) {
          if (this.orderInfo.content.length >= 15) {
            let text1 = this.orderInfo.content.substring(0, 10);
            this.subRemarks = `${text1}....`;
          } else {
            this.subRemarks = this.orderInfo.content;
          }
        }
      } else {
        this.descriptions = false;
      }
    },
  },
  components: {
    NewOwnerDetails,
    DriverDetails,
    VehicleDetails,
  },
  mounted() {},
  methods: {
    getAge(value) {
      let birthdays = new Date(value);
      let age = birthdays.valueOf();
      return age;
    },
    //合同编号
    dispatchWaybill() {
      let pdf = "";
      pdf =
        this.$baseUrl +
        "/freight/file/view/" +
        this.orderInfo.deliveryOrderContractId +
        "?accessToken=" +
        this.accessToken +
        "&preview=true";
      window.open(pdf, "_blank");
    },
    //车主详情
    newOwnerDetailsOpen(row) {
      this.newOwnerDetails = true;
      this.newOwnerDetailsId = this.orderInfo.actualCarrierUserId;
    },
    //车主信息关闭
    newOwnerDetailsEnd(val) {
      this.newOwnerDetails = val;
      this.newOwnerDetailsId = "";
    },

    // 驾驶员
    BidderdDiver(row) {
      this.BidderdUserId = this.orderInfo.driverUserId;
      this.driverModalue = true;
    },
    // 驾驶员详情关闭
    DriverDetaEnd(val) {
      this.driverModalue = val;
      this.BidderdUserId = "";
    },
    // 查看车辆详细
    LookVehicleInfo(row) {
      this.VehicleDetailsModalue = true;
      this.VehicleDetailsId = this.orderInfo.vehicleInfoVo.vehicleId;
    },
    //车辆详细信息关闭
    VehicleDetailsEnd(val) {
      this.VehicleDetailsModalue = val;
      this.VehicleDetailsId = "";
    },
  },
};
</script>

<style>
.Weight-content {
  background: #fde2e2;
}
.Weight-label {
  background: #fde2e2;
}
</style>